import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';
import { List, InputItem,NavBar, Checkbox, Toast, Flex,Icon,WingBlank,Button,Radio, Modal, Grid} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import Img from "../../components/Img/Img";
import select2 from '../../assets/img/select2.svg';
import select1 from '../../assets/img/select1.svg';
import { createForm } from 'rc-form';

import { list_box, p_left, list_height, span_available, span_used, span_remaining, modal_input, div_flex, bottom_box, grid_box, img_width, radio_box, img_height_problem, opacity_0 } from './payMent.less'
import paySuccesssvg from "../../assets/img/paySuccess.svg";
import payFail from "../../assets/img/payFail.svg";
import MyScroll from "../../components/MyScroll/MyScroll";
import RecommendGoods from "../../components/RecommendGood/RecommendGoods";

const {Item} =List;
const RadioItem = Radio.RadioItem;
const CheckboxItem = Checkbox.CheckboxItem;


class PayMent extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        const {dispatch} =this.props;
        const {list=[]} = this.props.orderList;

        return (
            <Flex style={{
                height:"100%",
                width:"100%"
            }} direction="column"
            >
                <NavTopBar dispatch={dispatch} title="支付失败" noBack={true}/>
                <MyScroll>
                    <div style={{backgroundColor:"#fff"}}>
                        <Flex justify="center">
                            <Icon type={payFail.id} style={{width:"1rem",height:"1rem",marginRight:".6rem"}}/>
                            {/* <img src={require('../../assets/img/payFail.png')} style={{display: "block",width:"1rem",height:"1rem",marginRight:".6rem"}}/> */}
                            <div style={{padding:".4rem 0"}}>
                                <p>支付失败。请重新支付</p>
                            </div>
                        </Flex>
                        <Flex justify="around" style={{paddingBottom:".4rem"}}>
                            <Link to="/" style={{padding:".15rem .2rem",border:"1px solid #333",borderRadius:"50px"}}>返回首页</Link>
                        <div style={{padding:".15rem .2rem",border:"1px solid #ff0036",borderRadius:"50px",color:"#ff0036"}} onClick={() => this.props.dispatch(routerRedux.push({pathname:`/cart`}))}>重新购买</div>
                        </Flex>
                    </div>
                    <RecommendGoods data={list} dispatch={dispatch}/>
                </MyScroll>

            </Flex>
        );
    }
}

export default connect(({ orderList }) => ({ orderList }))(createForm()(PayMent));
